<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        a,a:active,a:hover{
            text-decoration: none;
        }

        ul,ol,li{
            list-style: none;
        }

        img{
            width: 100%;
            height: 100%;
        }

        .clear{
            clear: both;
            content: "";
            display: block;
        }

        .banner{
            width: 800px;
            height: 400px;
            border: solid;
            margin: 40px auto;
            position: relative;
        }

        .banner > ul{
            width: 500%;
            height: 100%;
            position:relative;
        }

        .banner > ul > li{
            width: 800px;
            height: 100%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            float:left;
            font-size: 150px;
        }

        .banner > ol {
            height: 50px;
            padding: 0px 10px ;
            background: rgba(0,0,0,.5);
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform:translateX(-50%) ;
            border-radius: 15px ;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .banner > ol > li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            margin: 0 15px;
            cursor: pointer;
        }

        .banner > ol > li.active{
            background: red;
        }

        .banner > div{
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            top: 50%;
            transform:translateY(-50%) ;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .banner > div > a{
            display: flex;
            width: 50px;
            height: 50px;
            font-size: 30px;
            color: #fff;
            background: rgba(0,0,0,.5);
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    
    <div class="banner">
        <!-- 实际项目中,图片标签,都是动态生成的 -->
        <ul class="clear"></ul>
        <ol></ol>
        <div>
            <a href="JavaScript:;">&lt;</a>
            <a href="JavaScript:;">&gt;</a>
        </div>
    </div>

    <script src="../../../tools.js"></script>
    <script>
        // 目标轮播图,原始图片,路径信息,应该是 img标签 src的属性值
        var imgArr = [
            { width:1920,height:500,size:127,src:'./images/1.jpg',name:'轮播图1' },
            { width:1920,height:500,size:337,src:'./images/2.jpg',name:'轮播图2' },
            { width:1920,height:500,size:247,src:'./images/3.jpg',name:'轮播图3' },
            { width:1920,height:500,size:205,src:'./images/4.jpg',name:'轮播图4' },
            { width:1920,height:500,size:362,src:'./images/5.jpg',name:'轮播图5' },
            { width:1920,height:500,size:137,src:'./images/6.jpg',name:'轮播图6' },
        ];



        // 获取标签对象:

        // 获取轮播图div标签对象
        const oBanner = document.querySelector('.banner');

        // 获取轮播图div中的ul标签对象
        const oUl = oBanner.querySelector('ul');

        // 获取轮播图div中的ol标签对象
        const oOl = oBanner.querySelector('Ol');


        // 定义变量

        // 存储数组单元格数
        let arrLength = imgArr.length;

        // 获取div宽度或者获取li宽度
        let divWidth = parseInt( myGetStyle( oBanner , 'width' ) );
 


        // 1, 调用函数, 根据数组数据库, 生成 ul和ol中的标签对象
        setLi(imgArr);




        // 一, 定义一个函数,根据数组属性,生成 标签字符串,吸入ul,ol
        function setLi(array){
            // 根据数组,生成 字符串标签

            // 存储 生成的ul>li标签对象字符串
            let ulStr = '';
            // 存储 生成的ol>li标签对象字符串
            let olStr = '';

            // 循环遍历数组对象
            array.forEach(function(val,key){
                // ul>li中 标签内容是 li>img>src属性值是数组中存储的路径数据
                ulStr += `
                    <li>
                        <img src="${val.src}">    
                    </li>
                `
                // ol>li中 标签内容是 li标签本身
                // 第一个li标签,也就是索引是0时,拼接的li,添加class样式
                // 其他li标签,没有 class样式
                olStr += key === 0 ?  '<li class="active"></li>' : '<li></li>';
                
            })

            // 将生成的ul>li字符串写入ul标签对象
            oUl.innerHTML = ulStr;
            // 将生成的ol>li字符串写入ol标签对象
            oOl.innerHTML = olStr;

            // 将原始轮播图写入到ul中之后,ul中才有li标签
            // 将原始第一个li,复制克隆,写入到ul标签的末位
            // 将原始最后一个li,复制克隆,写入到ul标签的首位
            
            // 获取ul中所有的li标签对象
            const oOlLis = oUl.querySelectorAll('li'); 

            // 获取第一个li标签对象和最后一个li标签对象
            const oFirst = oOlLis[0];
            const oLast = oOlLis[arrLength-1];

            // 克隆第一个和最后一个标签对象 
            const oFirstClone = oFirst.cloneNode(true);
            const oLastClone = oLast.cloneNode(true);

            // 克隆的第一个标签,写入到ul的最后
            oUl.appendChild( oFirstClone );
            // 克隆的最后一个标签,写入到ul的起始
            oUl.insertBefore( oLastClone ,  oFirst);


            // 设定 oUl的宽度 是 一个li的宽度/div宽度 * li的个数+2
            // 也就是数组中数据单元个数也就是轮播图原始图片个数 + 2张克隆的图片个数
            oUl.style.width = divWidth * (arrLength+2) + 'px';
        }




        /* 轮播图1 HTML css定义
         轮播图2 生成 ul中li和img图片标签 ol中li标签
             2-1 轮播图 原始图片 6张 ul,ol中都是生成6个li 
                1, 生成 ul>li 和 ol>li 标签对象
                   循环变量 数组 
                        ul>li 内容是: 
                            li标签中嵌套 img标签 
                            img标签 scr 属性值 是 数组中存储的路径信息,实际项目中一般是一个图片的网址

                        ol>li 内容是:
                            第一个li标签,拼接class样式
                            li标签本身

                2, 将 生成的 ul>li 字符串, 写入 ul标签对象 
                   将 生成的 ol>li 字符串, 写入 ol标签对象
                   
                3, 设定 动态渲染生成 ul宽度
                    div宽度/li宽度 * 数组中单元个数 + 2
                                    li个数,轮播图原始图片个数 + 两个克隆的图片个数
        

        */
    </script>
</body>
</html>